<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <%@ include file="../../static/head.jsp" %>
    <!-- font-awesome -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/font-awesome.min.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <title></title>
</head>
<style>
    .redBorder {
        padding-left: 10%;
        /*padding-top: 64px;*/
    }

    .buttonXMargin {
        margin-left: 4px;
        margin-right: 4px;
    }

</style>
<body>
<!-- Pre Loader -->
<div class="loading">
    <div class="spinner">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
    </div>
</div>
<!--/Pre Loader -->
<div class="wrapper">
    <!-- Page Content -->
    <div id="content">
        <!-- Top Navigation -->
        <%@ include file="../../static/topNav.jsp" %>
        <!-- Menu -->
        <div class="container menu-nav">
            000000
            <nav class="navbar navbar-expand-lg lochana-bg text-white">
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent"
                        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="ti-menu text-white"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- <div class="z-navbar-nav-title">$template2.back.menu.title.text</div> -->
                    <ul id="navUl" class="navbar-nav mr-auto">
                    </ul>
                </div>
            </nav>
        </div>
        <!-- /Menu -->
        <!-- Breadcrumb -->
        <!-- Page Title -->
        <div class="container mt-0">
            <div class="row breadcrumb-bar">
                <div class="col-md-6">
                    <h3 class="block-title">学生签到管理</h3>
                </div>
                <div class="col-md-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="${pageContext.request.contextPath}/index.jsp">
                                <span class="ti-home"></span>
                            </a>
                        </li>
                        <li class="breadcrumb-item"><span>学生签到任务管理</span></li>
                        <li class="breadcrumb-item active"><span>学生签到任务列表</span></li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- /Page Title -->

        <!-- /Breadcrumb -->
        <!-- Main Content -->
        <div class="container mt-0" id="signTaskList">
            <div>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="教师姓名">
                        <el-input v-model="teacherName" placeholder="请输入教师姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="签到时间">
                        <el-date-picker
                                v-model="value2"
                                type="datetimerange"
                                :picker-options="pickerOptions"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                align="right">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchSignTaskList">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <div class="col-md-6 col-sm-3 z-pages" style="flex:none;max-width:inherit;display:flex;">
                <div class="dataTables_length" id="tableId_length">
                    <select name="tableId_length" aria-controls="tableId"
                            id="selectPageSize" v-model="pageSize">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                    <span class="text">条每页</span>
                </div>
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-end">
                        <li v-if="currentPage != 1" class="page-item" id="tableId_previous" @click="prePage">
                            <a class="page-link" href="#" tabindex="-1">上一页</a>
                        </li>
                        <li v-if="currentPage != totalPage" class="page-item" id="tableId_next" @click="nextPage">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <!-- /Main Content -->

    </div>
    <!-- /Page Content -->
</div>
<!-- Back to Top -->
<a id="back-to-top" href="#" class="back-to-top">
    <span class="ti-angle-up"></span>
</a>
<!-- /Back to Top -->
<%@ include file="../../static/foot.jsp" %>
<script language="javascript" type="text/javascript"
        src="${pageContext.request.contextPath}/resources/My97DatePicker/WdatePicker.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入element-ui组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    <%@ include file="../../utils/menu.jsp"%>
    <%@ include file="../../static/setMenu.js"%>
    <%@ include file="../../utils/baseUrl.jsp"%>
    <%@ include file="../../static/getRoleButtons.js"%>
    <%@ include file="../../static/crossBtnControl.js"%>
    const tableName = "xueshengqiandao";
    const pageType = "list";

    const signTaskList = new Vue({
        el: '#signTaskList',
        data: function () {
            return {
                visible: false,
                message: 'Hello Vue!',
                // 搜索教师的姓名
                teacherName: '',
                // 分页大小
                pageSize: 10,
                // 当前页码
                currentPage: 1,
                // 总页数
                totalPage: 1,
                // 开始时间
                startTime: '',
                // 结束时间
                endTime: '',
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value2: '',
            }
        },
        mounted() {
            console.log("mounted");
        },
        methods: {
            // 获取任务列表
            searchSignTaskList() {
                // this.startTime = document.getElementById("startSignTime").value;
                // this.endTime = document.getElementById("endSignTime").value;
                console.log(this.teacherName);

                console.log(this.value2)
                console.log(this.pageSize);
            }
        },
        watch: {
            // 每页显示的数量发生变化，重新获取数据
            pageSize: function (newVal, oldVal) {
                this.searchSignTaskList();
            }
        }
    });

    /**
     * 跳转到添加签到任务页面
     */
    function addSignTask() {
        window.location.href = "${pageContext.request.contextPath}/jsp/modules/xueshengqiandao/add.jsp";
    }

    $(document).ready(function () {
        //激活翻页按钮
        $('#tableId_previous').attr('class', 'paginate_button page-item previous')
        $('#tableId_next').attr('class', 'paginate_button page-item next')
        //隐藏原生搜索框
        $('#tableId_filter').hide()
        //设置右上角用户名
        $('.dropdown-menu h5').html(window.sessionStorage.getItem('username') + '(' + window.sessionStorage.getItem('role') + ')')
        //设置项目名
        $('.sidebar-header h3 a').html(projectName)
        setMenu();
        // init();
        // getDataList();
        <%@ include file="../../static/myInfo.js"%>
    });
</script>
</body>

</html>